<template>
  <activity-panel title="热力图">
    <el-form class="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="Blur" label-position="left">
        <el-slider
          v-model="blur"
          :min="0"
          :max="100"
          :step="1"
          @change="changeBlur"></el-slider>
      </el-form-item>

      <el-form-item label="Radius" label-position="left">
        <el-slider
          v-model="radius"
          :min="0"
          :max="100"
          :step="1"
          @change="changeRadius"></el-slider>
      </el-form-item>
    </el-form>
  </activity-panel>
  <base-map :center="center" :zoom="zoom" @loadend="onLoadEnd" />
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";

import { Vector as VectorLayer, Heatmap } from "ol/layer";
import { Vector as VectorSource, Cluster } from "ol/source";
import { GeoJSON } from "ol/format";

const center = [108.89766828762245, 33.42875613964681];
const zoom = 5;

function onLoadEnd() {
  addHeatMapLayer();
}

let heatMapLayer;
const blur = ref(15);
const radius = ref(8);

function addHeatMapLayer() {
  const weatherStationSource = new VectorSource({
    format: new GeoJSON(),
    url: "src/data/气象站点/stations-wgs.geojson",
  });

  heatMapLayer = new Heatmap({
    source: weatherStationSource,
    blur: blur.value,
    radius: radius.value,
  });

  window.map.addLayer(heatMapLayer);
}

function changeBlur(value) {
  heatMapLayer.setBlur(value);
}

function changeRadius(value) {
  heatMapLayer.setRadius(value);
}
</script>

<style lang="less" scoped></style>
